
import { 
  TrendingUp, 
  AlertTriangle, 
  Target, 
  Clock, 
  CheckCircle,
  Lightbulb,
  BarChart3,
  ArrowRight
} from 'lucide-react';
import { ProductivitySuggestions as ProductivitySuggestionsType } from '../../services/insightsAPI';

interface ProductivitySuggestionsProps {
  data: ProductivitySuggestionsType;
}

export default function ProductivitySuggestions({ data }: ProductivitySuggestionsProps) {
  const getPriorityColor = (priority: string) => {
    switch (priority) {
      case 'high':
        return 'border-red-200 bg-red-50 text-red-700';
      case 'medium':
        return 'border-yellow-200 bg-yellow-50 text-yellow-700';
      case 'low':
        return 'border-green-200 bg-green-50 text-green-700';
      default:
        return 'border-theme-border bg-theme-bg-secondary text-theme-text-secondary';
    }
  };

  const getPriorityIcon = (priority: string) => {
    switch (priority) {
      case 'high':
        return <AlertTriangle className="w-5 h-5 text-red-600" />;
      case 'medium':
        return <Clock className="w-5 h-5 text-yellow-600" />;
      case 'low':
        return <CheckCircle className="w-5 h-5 text-green-600" />;
      default:
        return <Lightbulb className="w-5 h-5 text-theme-text-secondary" />;
    }
  };

  const getTypeIcon = (type: string) => {
    switch (type) {
      case 'completion_rate':
        return <Target className="w-4 h-4" />;
      case 'procrastination':
        return <Clock className="w-4 h-4" />;
      case 'category_focus':
        return <BarChart3 className="w-4 h-4" />;
      case 'task_load':
        return <TrendingUp className="w-4 h-4" />;
      default:
        return <Lightbulb className="w-4 h-4" />;
    }
  };

  return (
    <div className="space-y-6">
      {/* 整体统计 */}
      <div className="bg-theme-bg rounded-xl border border-theme-border/60 shadow-sm p-5">
        <h3 className="text-sm font-semibold text-theme-text mb-4 flex items-center gap-2">
          <div className="w-1 h-4 bg-blue-500 rounded-full"></div>
          <BarChart3 className="w-4 h-4 text-theme-text-muted" />
          生产力概览
        </h3>

        <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
          <div className="text-center p-4 bg-blue-50 border border-blue-200 rounded-xl">
            <div className="text-2xl font-bold text-blue-600">{data.stats.totalTasks}</div>
            <div className="text-sm text-theme-text-secondary font-medium">总任务数</div>
          </div>
          
          <div className="text-center p-4 bg-green-50 border border-green-200 rounded-xl">
            <div className="text-2xl font-bold text-green-600">{data.stats.completionRate}%</div>
            <div className="text-sm text-theme-text-secondary font-medium">完成率</div>
          </div>
          
          <div className="text-center p-4 bg-orange-50 border border-orange-200 rounded-xl">
            <div className="text-2xl font-bold text-orange-600">{data.stats.avgDelayDays}</div>
            <div className="text-sm text-theme-text-secondary font-medium">平均延迟天数</div>
          </div>
          
          <div className="text-center p-4 bg-purple-50 border border-purple-200 rounded-xl">
            <div className="text-2xl font-bold text-purple-600">{data.stats.completedTasks}</div>
            <div className="text-sm text-theme-text-secondary font-medium">已完成任务</div>
          </div>
        </div>
      </div>

      {/* 智能建议 */}
      <div className="bg-theme-bg rounded-xl border border-theme-border/60 shadow-sm p-5">
        <h3 className="text-sm font-semibold text-theme-text mb-4 flex items-center gap-2">
          <div className="w-1 h-4 bg-purple-500 rounded-full"></div>
          <Lightbulb className="w-4 h-4 text-theme-text-muted" />
          智能建议 ({data.suggestions.length})
        </h3>

        {data.suggestions.length === 0 ? (
          <div className="text-center py-8">
            <CheckCircle className="w-12 h-12 text-green-500 mx-auto mb-3" />
            <h4 className="text-lg font-semibold text-theme-text mb-2">表现优秀！</h4>
            <p className="text-theme-text-secondary">
              您的任务管理表现很好，暂时没有需要改进的建议。
            </p>
          </div>
        ) : (
          <div className="space-y-4">
            {data.suggestions.map((suggestion, index) => (
              <div
                key={index}
                className={`border rounded-xl p-4 ${getPriorityColor(suggestion.priority)}`}
              >
                <div className="flex items-start gap-3">
                  <div className="flex-shrink-0 mt-0.5">
                    {getPriorityIcon(suggestion.priority)}
                  </div>
                  
                  <div className="flex-1 min-w-0">
                    <div className="flex items-center gap-2 mb-2">
                      {getTypeIcon(suggestion.type)}
                      <h4 className="font-semibold text-theme-text">
                        {suggestion.title}
                      </h4>
                      <span className={`px-2 py-1 rounded-full text-xs font-medium ${
                        suggestion.priority === 'high' 
                          ? 'bg-red-100 text-red-700' 
                          : suggestion.priority === 'medium'
                          ? 'bg-yellow-100 text-yellow-700'
                          : 'bg-green-100 text-green-700'
                      }`}>
                        {suggestion.priority === 'high' ? '高优先级' : 
                         suggestion.priority === 'medium' ? '中优先级' : '低优先级'}
                      </span>
                    </div>
                    
                    <p className="text-sm text-theme-text-secondary mb-3">
                      {suggestion.description}
                    </p>
                    
                    {suggestion.actionable && (
                      <div className="flex items-center gap-2 text-sm font-medium text-theme-text-secondary">
                        <ArrowRight className="w-4 h-4" />
                        <span>点击查看具体行动建议</span>
                      </div>
                    )}
                  </div>
                </div>
              </div>
            ))}
          </div>
        )}
      </div>

      {/* 建议分类统计 */}
      {data.suggestions.length > 0 && (
        <div className="bg-theme-bg rounded-xl border border-theme-border/60 shadow-sm p-5">
          <h3 className="text-sm font-semibold text-theme-text mb-4 flex items-center gap-2">
            <div className="w-1 h-4 bg-green-500 rounded-full"></div>
            <TrendingUp className="w-4 h-4 text-theme-text-muted" />
            改进重点
          </h3>

          <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
            {/* 优先级分布 */}
            <div className="text-center p-4 bg-theme-bg-secondary border border-theme-border rounded-xl">
              <div className="text-lg font-bold text-theme-text mb-1">
                {data.suggestions.filter(s => s.priority === 'high').length}
              </div>
              <div className="text-sm text-red-600 font-medium">高优先级建议</div>
            </div>

            <div className="text-center p-4 bg-theme-bg-secondary border border-theme-border rounded-xl">
              <div className="text-lg font-bold text-theme-text mb-1">
                {data.suggestions.filter(s => s.priority === 'medium').length}
              </div>
              <div className="text-sm text-yellow-600 font-medium">中优先级建议</div>
            </div>

            <div className="text-center p-4 bg-theme-bg-secondary border border-theme-border rounded-xl">
              <div className="text-lg font-bold text-theme-text mb-1">
                {data.suggestions.filter(s => s.actionable).length}
              </div>
              <div className="text-sm text-green-600 font-medium">可执行建议</div>
            </div>
          </div>
        </div>
      )}
    </div>
  );
}
